<template>
  <div ref="panel" class="console-panel">
    <!-- handle -->
    <div ref="handle" class="handle-bar"></div>
    <!-- 日志 -->
    <logPanel v-if="consolePanel.log" />
    <!-- vuex state -->
    <vuexPanel v-if="consolePanel.vuex" />
  </div>
</template>

<script>
import logPanel from './logPanel'
import vuexPanel from './vuexPanel'
import { mapState } from 'vuex'
let h = 200
export default {
  data() {
    return {
      h: 200
    }
  },
  watch: {
    isOpen: {
      handler: function (v) {
        this.computedGsdevtoolHeight(v, this.h)
      }
    },
    animateDebug(v) {
      if (!this.isOpen) {
        // 计算只有顶部状态栏高度
        let dom = document.querySelector('.panel-footer-nav .status-bar')
        let display = getComputedStyle(dom).display
        display == 'block' &&
          (document.querySelector('.gs-dev-tools').style.top =
            'calc(100% - 83px)')
        return
      }
      this.computedGsdevtoolHeight(v, this.h)
    }
  },
  computed: {
    ...mapState('cmlpanel', ['consolePanel', 'isFooterNavOpen']),
    ...mapState('animate', ['animateDebug']),
    isOpen() {
      return this.consolePanel.log || this.consolePanel.vuex
    },
    isFooterNav() {
      return this.isFooterNavOpen
    }
  },
  mounted() {
    this.$nextTick(() => {
      const that = this
      const indicator = this.$refs.handle
      const panel = this.$refs.panel
      if (!Draggable) return
      Draggable.create(indicator, {
        type: 'y',
        throwProps: true,
        cursor: 'ns-resize',
        bounds: '.cml-panel-container-center',
        onPress: (e) => {
          e.stopPropagation() // cancel drag
          h = parseFloat(getComputedStyle(panel).height)
        },
        onDrag: function (e) {
          panel.style.height = -this.y + h + 'px'
          that.computedGsdevtoolHeight(that.isOpen, -this.y + h)
          that.h = -this.y + h
          // reset
          TweenMax.set(indicator, { y: 0 })
        },
        onDragEnd: function (e) {}
      })
    })
  },
  methods: {
    computedGsdevtoolHeight(v, h = 200) {
      let dom = document.querySelector('.gs-dev-tools')
      if (v) {
        if (this.isFooterNavOpen) {
          dom && (dom.style.top = `calc(100% - 83px - ${h}px)`)
        } else {
          dom && (dom.style.top = `calc(100% - 52px - ${h}px)`)
        }
      } else {
        if (this.isFooterNavOpen) {
          dom && (dom.style.top = 'calc(100% - 83px)')
        } else {
          dom && (dom.style.top = 'calc(100% - 51px)')
        }
      }
    }
  },
  components: {
    logPanel,
    vuexPanel
  }
}
</script>

<style lang="scss" scoped>
.console-panel {
  display: flex;

  position: absolute;
  bottom: 70px;
  left: 1px;

  width: calc(100% - 2px);
  height: 200px;
  border-top: 1px solid #a2d5d226;

  background-color: rgba(30, 36, 36, 0.8);

  font-family: console;
  & > div {
    &:nth-last-child(2) {
      border-right: 1px solid #525252;
    }
  }
  .handle-bar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    height: 2px;

    background-color: #303f3e;
  }
}
</style>
